<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>计算属性和侦听器</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<!--模板内表达式，设计初衷用于简单运算-->
<div id="app1">
    {{message.split('').reverse().join('')}}
</div>
<!--计算属性computed-->
<div id="app2">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>当前时间：{{ now }}</p>
</div>
<!--侦听属性watch-->
<div id="app3">{{ fullName }}</div>
<!--计算属性代替-->
<div id="app4">{{ fullName }}</div>
<!--计算属性的setter,计算属性默认只有getter,不过在需要时你也可以提供一个setter-->
<div id="app5">{{ fullName }}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm1 = new Vue({
        el:'#app1',
        data:{
            message:'Hello World'
        }
    })

    var vm2 = new Vue({
        el: '#app2',
        data: {
            message: 'Hello'
        },
        computed: {
            //计算属性的getter
            reversedMessage: function () {
                //'this' 指向vm2实例
                return this.message.split('').reverse().join('')
            },
            now: function () {
                return Date.now()
            }
        }
    })

    var vm3 = new Vue({
        el:'#app3',
        data: {
            firstName:'Foo',
            lastName:'Bar',
            fullName:'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val;
            }
        }
    })


    var vm4 = new Vue({
        el:'#app4',
        data: {
            firstName:'Foo',
            lastName:'Bar'
        },
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })

    var vm5 = new Vue({
        el:'#app5',
        data: {
            firstName:'FOO',
            lastName:'BAR',
        },
        computed: {
            fullName: {
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                set: function (newValue) {
                    var names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    })
</script>
</html>